$(document).ready(function() {

	//show/hide drop-down-menu
	$("#useroptions").click(function(){
		if($("#drop_down_menu").is(":hidden")){
			$("#drop_down_menu").show();
		}
		else{
			$("#drop_down_menu").hide();
			$("#login_form > input[type=text]").css("color", "#404040");
			$("#login_form > input[type=password]").css("color", "#404040");
		}
	});

	
	//click login button
	$("#submit_login_form").click(function() {
		if ($("#login_form > input[type=text]").val().length != 0 && $("#login_form > input[type=password]").val().length != 0) {
			$(".login_on").show();
			$(".login_off").hide();
			
			$("#useroptions p").text($("#login_form > input[type=text]").val());
			
			$("#drop_down_menu").hide();
			onResize();
		}
		//font color red if no username && password 
		else if($("#login_form > input[type=text]").val().length == 0 && $("#login_form > input[type=password]").val().length == 0){
			$("#login_form > input[type=text]").css("color", "#ff4500");
			$("#login_form > input[type=password]").css("color", "#ff4500");
		}
		//font color red if no username
		else if($("#login_form > input[type=text]").val().length == 0){
			$("#login_form > input[type=text]").css("color", "#ff4500");
			$("#login_form > input[type=password]").css("color", "#404040");
		}
		//font color red if no password
		else if($("#login_form > input[type=password]").val().length == 0){
			$("#login_form > input[type=text]").css("color", "#404040");
			$("#login_form > input[type=password]").css("color", "#ff4500");
		}
	});
	
	$("#logout p").click(function(){
		$(".login_off").show();
		$(".login_on").hide();
			
		$("#useroptions p").text("login");
			
		$("#drop_down_menu").hide();
		onResize();
	});

});
